<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>苏宁易购</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <!-- 顶部的banner区域 -->
  <div class="top-banner">
    <a href="#" class="top-banner-img">
      <img src="images/top_banner.jpg" alt="">
    </a>
    <a href="#" class="close"></a>
  </div>
  <!-- 顶部的banner区域结束 -->
  <!-- header 区域 -->
  <div class="header">
    <div class="header-top">
      <a href="#" class="classify"><img src="images/classify.png" alt=""></a>
      <a href="#" class="ad"><img src="images/ad.gif" alt=""></a>
      <a href="#" class="login"><img src="images/login.png" alt=""></a>
    </div>
    <div class="search">
      <a href="#"></a>
      <i></i>
      <form>
        <input type="search" placeholder="400元北京消费补贴">
      </form>
    </div>
  </div>
  <!-- header 区域结束 -->
  <!-- 轮播图部分 -->
  <div class="banner">
    <div class="wrapper">
      <ul>
        <li class="current"><a href="#"><img src="images/banner.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
      </ul>
      <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="current-li"></li>
        <li></li>
      </ol>
    </div>
  </div>
  <!-- 轮播图部分结束 -->
  <!-- 优惠活动区域 -->
  <div class="coupon">
    <a href="#"><img src="images/ad_bottom_01.gif" alt=""></a>
    <a href="#"><img src="images/ad_bottom_02.gif" alt=""></a>
    <a href="#"><img src="images/ad_bottom_03.gif" alt=""></a>
  </div>
  <!-- 优惠活动区域结束 -->
  <!-- nav 区域 -->
  <div class="nav">
    <a href="#">
      <img src="images/nav_01.png" alt="">
      <p class="title">苏宁秒杀</p>
    </a>
    <a href="#">
      <img src="images/nav_02.png" alt="">
      <p class="title">苏宁超市</p>
    </a>
    <a href="#">
      <img src="images/nav_03.png" alt="">
      <p class="title">苏宁拼购</p>
    </a>
    <a href="#">
      <img src="images/nav_04.png" alt="">
      <p class="title">手机数码</p>
    </a>
    <a href="#">
      <img src="images/nav_05.png" alt="">
      <p class="title">苏宁家电</p>
    </a>
    <a href="#">
      <img src="images/nav_06.png" alt="">
      <p class="title">免费水果</p>
    </a>
    <a href="#">
      <img src="images/nav_07.png" alt="">
      <p class="title">super会员</p>
    </a>
    <a href="#">
      <img src="images/nav_08.png" alt="">
      <p class="title">签到有礼</p>
    </a>
    <a href="#">
      <img src="images/nav_09.png" alt="">
      <p class="title">领券中心</p>
    </a>
    <a href="#">
      <img src="images/nav_010.png" alt="">
      <p class="title">更多频道</p>
    </a>
  </div>
  <!-- nav 区域结束 -->
  <!-- 新人优惠区域 -->
  <div class="coupon-new">
    <div class="coupon-and-new">
      <a href="#"><img src="images/youhui01.png" alt=""></a>
    <a href="#"><img src="images/youhui02.png" alt=""></a>
    <a href="#"><img src="images/youhui03.png" alt=""></a>
    </div>
  </div>
  <div class="box"></div>
  <!-- 新人优惠区域结束 -->
  <!-- 秒杀商品区 -->
  <div class="shopping">
    <div class="shopping-left">
      <div class="title">
        <div class="title-h">限时秒杀</div>
        <!-- <div class="title-time">
          <span class="hour">00</span>
          <i>:</i>
          <span class="minute">59</span>
          <i>:</i>
          <span class="second">25</span>
        </div> -->
      </div>
      <p class="text">人气好货限时抢</p>
      <ul>
        <li class="li-left">
          <a href="#">
            <img src="images/mt.jpg" alt="">
            <p class="p">
              <span>￥</span><span>29</span><span>.9</span>
            </p>
          </a>
        </li>
        <li class="li-right">
          <a href="#">
            <img src="images/hongz.jpg" alt="">
            <p class="p">
              <span>￥</span><span>12</span><span>.9</span>
            </p>
          </a>
        </li>
      </ul>
    </div>
    <div class="border-line"></div>
    <div class="shopping-right">
      <div class="title">
        <div class="title-h">大聚惠</div>
      </div>
      <p class="text">聚优品 · 惠生活</p>
      <a href="#" class="a">
        <img src="images/sx.webp" alt="">
        <p class="p">苏鲜生</p>
      </a>
      <a href="#" class="a b">
        <img src="images/bcw.webp" alt="">
        <p class="p">百草味</p>
      </a>
    </div>
  </div>
  <div class="shopping">
    <div class="shopping-left">
      <div class="title">
        <div class="title-h">新品首发</div>
      </div>
      <p class="text">大牌新机0元试</p>
      <ul>
        <li class="li-left">
          <a href="#">
            <img src="images/phone.webp" alt="">
          </a>
        </li>
        <li class="li-right">
          <a href="#">
            <img src="images/phone02.webp" alt="">
          </a>
        </li>
      </ul>
    </div>
    <div class="border-line"></div>
    <div class="shopping-right">
      <div class="title">
        <div class="title-h">苏宁拼购</div>
      </div>
      <p class="text">2人拼更实惠 全场包邮</p>
      <a href="#" class="a">
        <img src="images/bg.webp" alt="">
        <p class="p">2人拼58</p>
      </a>
      <a href="#" class="a b">
        <img src="images/cha.webp" alt="">
        <p class="p">2人拼59</p>
      </a>
    </div>
  </div>
  <div class="border-line-bottom"></div>
  <div class="shopping-bottom">
    <div class="bottom-left">
      <a href="#" class="left-a">
        <p class="a-p">为您推荐</p>
        <p class="a-p-p">精选频道</p>
      </a>
    </div>
    <div class="four">
      <div class="four-box">
        <a href="" class="box-a">
          <img src="images/ningm.webp" alt="">
          <p>苏宁国际</p>
        </a>
      </div>
      <div class="four-box">
        <a href="" class="box-a">
          <img src="images/sun.webp" alt="">
          <p>苏宁Outlets</p>
        </a>
      </div>
      <div class="four-box">
        <a href="" class="box-a">
          <img src="images/jiu.png" alt="">
          <p>会员抢购</p>
        </a>
      </div>
      <div class="four-box">
        <a href="" class="box-a">
          <img src="images/vip.png" alt="">
          <p>Super会员</p>
        </a>
      </div>
    </div>
  </div>
  <!-- 秒杀商品区结束 -->
  <!-- 爆款抢购 -->
  <div class="bao">
    <a href="#"><img src="images/baok.png" alt=""></a>
  </div>
  <!-- 爆款抢购结束 -->
  <!-- 底部固定区域 -->
  <div class="foot">
    <a href="#">
      <img src="images/foot01.png" alt="">
      <span>首页</span>
    </a>
    <a href="#">
      <img src="images/foot02.png" alt="">
      <span>分类</span>
    </a>
    <a href="#">
      <img src="images/foot03.png" alt="">
      <span>排行榜</span>
    </a>
    <a href="#">
      <img src="images/foot04.png" alt="">
      <span>购物车</span>
    </a>
    <a href="#">
      <img src="images/foot05.png" alt="">
      <span>我的易购</span>
    </a>
  </div>
  <!-- 底部固定区域结束 -->
  <!-- 底部固定登录区域 -->
  <div class="into">
    <a href="#">
      <img src="images/foot06.png" alt="">
    </a>
  </div>
  <!-- 底部固定登录区域结束 -->
</body>
</html>